<template>
	<view class="warp">
		<view class="teacher">
			<view class="swiper-item">
				<image :src="party.Banner" mode="aspectFill"></image>
			</view>
		</view>
		<view class="course">
			<view class="c_title">
				<view class="c_tit">{{ party.Title }}</view>

				<!--  #ifdef MP-WEIXIN -->
				<button hover-class="none" open-type="share">
					<view class="c_icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711071363812522.png" mode=""></image>
					</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<button hover-class="none" @click="app_share">
					<view class="c_icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711071363812522.png" mode=""></image>
					</view>
				</button>
				<!-- #endif -->
			</view>
		</view>
		<view class="course_deatil">
			<!-- <view class="tit">赛事概要</view> -->
			<view class="lit">
				<view class="lit_item" style="width: 100%">
					<view class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711074010977794.png" mode=""></image>
					</view>
					<view class="lit_text">比赛时间：{{ formattedDate }}</view>
				</view>
			</view>
			<view class="lit">
				<view class="lit_item">
					<view class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711074139231353.png" mode=""></image>
					</view>
					<view class="lit_text">报名截止：{{ party.RegisterEndDate }}</view>
				</view>
			</view>
			<view class="lit">
				<view class="lit_item">
					<view class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711074161769266.png" mode=""></image>
					</view>
					<view class="lit_text">报名费用：{{ party.IsFee == 0 ? '免费' : party.RegisterFee + '元/人' }}</view>
				</view>
			</view>
			<view class="lit" @click="call">
				<view class="lit_item">
					<view class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110741838751308.png" mode=""></image>
					</view>
					<view class="lit_text">联系电话：{{ party.Mobile || '--' }}</view>
					<!-- <view  class="lit_text">联系他</view> -->
				</view>
			</view>
			<view class="lit">
				<view class="lit_item">
					<view class="icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711074203966743.png" mode=""></image>
					</view>
					<view class="lit_text">比赛地点：{{ party.Address }}</view>
					<!-- <view class="gap">
						2.3km
						<uni-icons size="12" color="#d2d2d2" type="right"></uni-icons>
					</view> -->
				</view>
			</view>
		</view>
		<view class="people">
			<view class="tit">
				<view :class="['tit_nav', tabIndex == 1 ? 'tit_active' : '']" @click="tabIndex = 1">
					报名列表({{ party.Users ? party.Users.length : 0 }})
				</view>
				<view :class="['tit_nav', tabIndex == 2 ? 'tit_active' : '']" @click="tabIndex = 2">赛事详情</view>
			</view>
			<block v-if="tabIndex == 1">
				<view class="peoplebox" v-for="(l, i) in party.Users" :key="i">
					<view class="p_info">
						<view class="head">
							<image :src="l.HeadImgUrl" mode=""></image>
						</view>
						<view class="user_box">
							<view class="name_box">
								<view class="name">{{ l.Name }}</view>
								<view class="member member_hei_vip">{{ l.UserType }}</view>
							</view>
							<view class="user_lit">报名赛事</view>
						</view>
					</view>
					<view class="p_time">{{ getTime(l.CreateTime) }}</view>
				</view>
				<!-- <view class="bottom_lit">已经到底啦~</view> -->
			</block>
			<view class="match_img" v-if="tabIndex == 2">
				{{ l.Description ? l.Description : '赛事无介绍' }}
			</view>
		</view>

		<block v-if="party.Status == 0 || party.Status == 1">
			<view v-if="is_signed" class="btn_box" style="background-image: linear-gradient(#818792, #847b7bbd); color: #ffffff">
				您已报名
			</view>
			<block v-else>
				<view class="btn_box" v-if="party.Status == 0" @click="nav_to(`/pages/dynamic/activity_details?id=${id}`)">
					<view class="go_btn">立即报名</view>
				</view>
				<view v-else class="btn_box">
					<view class="end_btn">报名截止</view>
				</view>
			</block>
		</block>
		<block v-else>
			<view class="btn_box">
				<view class="end_btn">活动已结束</view>
			</view>
		</block>

		<!-- APP 分享 转发好友、朋友圈 -->
		<!-- #ifdef APP-PLUS -->
		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item" @click="shareWX()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
					<span>分享朋友圈</span>
				</view>
			</view>
		</uni-popup>
		<!-- #endif -->
	</view>
</template>

<script>

export default {
	components: {
		
	},
	data() {
		return {
			imgArr: [
				'https://gd-hbimg.huaban.com/4a15005fef3f85742a648deefd7a90994f5278ab19eb8d-7ntWmV_fw658webp',
				'https://gd-hbimg.huaban.com/2f1a82fe77608434c7764f4a4f4f7c70bf15cd801dc41a-1LJeWK_fw658webp',
			],
			imgIndex: 1,
			tabIndex: 1,

			id: '',
			party: {},
			formattedDate: '',
			is_signed: false,
		};
	},
	async onLoad(e) {
		this.id = e.id;
		if (await this.$store.getters.getLoginState) {
			this.Get_Detail();
		}
	},
	computed: {
		// 状态格式
		newStatus() {
			return (s) => {
				return s == 0 ? '报名中' : s == 1 ? '进行中' : s == 2 ? '已结束' : '已结束';
			};
		},
	},
	onShareAppMessage(res) {
		//发送给朋友

		return {
			title: '【Golf赛事】邀请您参加' + this.party.Title,
			path: `/pages/match/detail?id=${this.party.ID}&pid=${this.UserID}`,
		};
	},
	methods: {
		call() {
			uni.makePhoneCall({
				phoneNumber: this.party.Mobile,
				// 成功回调
				success: (res) => {
					console.log('调用成功!');
				}, // 失败回调
				fail: (res) => {
					// this.$pv.msg('暂无联系电话')
					console.log('调用失败!');
				},
			});
		},
		async publish() {
			this.nav_to('/pages/dynamic/dynamic_add?a=' + this.party.ID + '&t=' + this.party.Title);
		},
		app_share() {
			this.$refs.share.open();
		},
		async Get_Detail() {
			// let res = await this.$api.post('/Action/GetActionDetail', {
			// 	ID: this.id,
			// });
			let res = await this.$api.post('/Appointment/Detail', {
				ID: this.id,
			});

			this.party = res.data;
			console.log('---===');
			console.log(this.party);
			if (!this.party) return;
			this.party.Users.forEach((item, index) => {
				if (item.UserID == uni.getStorageSync('user').UserID) {
					this.is_signed = true;
				}
			});

			const startDate = new Date(res.data.StartDate);
			const endDate = new Date(res.data.EndDate);
			const startYear = startDate.getFullYear();
			const startMonth = startDate.getMonth() + 1; // 月份从0开始，需要加1
			const startDay = startDate.getDate();
			const startHours = startDate.getHours();
			const startMinutes = startDate.getMinutes();

			const endYear = endDate.getFullYear();
			const endMonth = endDate.getMonth() + 1; // 月份从0开始，需要加1
			const endDay = endDate.getDate();
			const endHours = endDate.getHours();
			const endMinutes = endDate.getMinutes();

			this.formattedDate = `${startYear}年${startMonth}月${startDay}日 ${String(startHours).padStart(2, '0')}:${String(
				startMinutes
			).padStart(2, '0')}-${String(endHours).padStart(2, '0')}:${String(endMinutes).padStart(2, '0')}`;
			console.log(this.formattedDate); // 输出：2023年10月24日 13:00-22:00
		},
		async sub() {
			if (this.party.RegisterFee > 0) {
				//需要支付费用

				// 支付请求
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: this.party.RegisterFee,
					EventType: '活动报名',
					EventID: this.party.ID,
					body: '活动报名',
					// #ifdef MP-WEIXIN
					PayChannel: 'weixin',
					// #endif
					// #ifdef APP
					PayChannel: 'app',
					// #endif
				});
				// 已余额支付成功
				if (pres.data == 0) {
					isPay = true;
				} else {
					// 支付成功返回的内容
					let payObj = JSON.parse(pres.data);
					let _this = this;
					// 调用uni支付API
					uni.requestPayment({
						// 服务提供商
						provider: 'wxpay',
						// #ifdef APP
						orderInfo: payObj,
						// #endif
						// #ifdef MP-WEIXIN
						timeStamp: payObj.timeStamp,
						nonceStr: payObj.nonceStr,
						package: payObj.package,
						signType: payObj.signType,
						paySign: payObj.paySign,
						// #endif
						success(res) {
							_this.SingAction();
						},
						fail(err) {
							_this.$pv.msg('支付失败');
						},
					});
				}
			} else {
				this.SingAction();
			}
		},
		async SingAction() {
			let _this = this;

			let res = await _this.$api.post('/Action/ActionSign', {
				ID: _this.id,
			});

			if (JSON.stringify(res.data) == 'true') {
				// 添加成功
				uni.showToast({
					title: '报名成功',
				});

				const date = new Date();
				_this.party.Users.push({
					UserID: uni.getStorageSync('user').UserID,
					HeadImgUrl: uni.getStorageSync('user').HeadImgUrl,
					Name: uni.getStorageSync('user').Name,
					UserType: uni.getStorageSync('user').UserType,
					CreateTime: date,
				});
			} else {
				// 其他错误
				uni.showToast({
					title: '操作失败，请稍后重试',
					icon: 'none',
				});
			}
		},

		golive() {
			uni.navigateTo({
				url: `/pages/dynamic/Picture_live?id=${this.id}`,
			});
		},

		sharePYQ() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let shareUrl = BaseUrl + paseUrl;

			console.log('share url-----' + shareUrl);

			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				href: shareUrl,
				title: '【动魅】' + this.party.Title,
				summary: this.party.Remark,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				success: (res) => {
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
		shareWX() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let sharUrl = BaseUrl + paseUrl;
			let _this = this;
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				title: '【动魅' + this.party.GolfType + '】' + this.party.Title,
				miniProgram: {
					id: 'gh_ff1a33213d99',
					path: 'pages/ball/ball_details?id=' + id + '&pid=' + pid,
					type: 0,
					webUrl: sharUrl,
				},
				success: (res) => {
					console.log('success:' + 'pages/ball/ball_details?id=' + id + '&pid=' + pid);
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});

			// this.is_app_share_show = false;
		},
	},
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}

image {
	width: 100%;
	height: 100%;
}

.line {
	width: 100%;
	height: 4rpx;
	background-color: #E4E4E4;
}

.warp {
	.teacher {
		box-sizing: border-box;
		position: relative;
		height: 400rpx;

		swiper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			width: 100%;
			height: 100%;
			
		}

		.num {
			position: absolute;
			right: 0;
			bottom: 50rpx;
			background-color: #000;
			display: flex;
			align-items: center;
			opacity: 0.7;
			color: #dde0df;
			font-size: 26rpx;
			padding: 4rpx 20rpx;
			border-top-left-radius: 50rpx;
			border-bottom-left-radius: 50rpx;

			.pic_index {
				color: #fff;
				font-size: 30rpx;
			}
		}
	}

	.course {
		padding: 26rpx;
		//padding-bottom: 40rpx;
		margin-top: -20rpx;
		background: #fff;
		z-index: 99;
		position: sticky;
		border-radius: 24rpx;
		.c_title {
			display: flex;
			//align-items: center;
			justify-content: space-between;
			//margin-bottom: 20rpx;

			.c_tit {
				color: #333333;
				font-size: 36rpx;
				width: 90%;
			}

			.c_icon {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.course_deatil {
		padding: 22rpx 0rpx;
		margin: 0 26rpx;
		border-top: 1rpx solid #E4E4E4;
		border-bottom: 1rpx solid #E4E4E4;

		view {
			color: #666;
		}

		.tit {
		}

		.lit {
			margin: 10rpx 0;
			width: 100%;

			.lit_item {
				width: 100%;
				display: flex;

				// align-items: center;
				.icon {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					margin-right: 10rpx;
				}

				.lit_text {
					width: 100%;
					font-size: 28rpx;
				}
				.gap {
					font-size: 28rpx;
					display: flex;
					align-items: center;
				}
			}

			.lit_address {
				font-size: 26rpx;

				display: flex;
				justify-content: space-between;
				align-items: center;

				.address_tit {
					width: 75%;
					color: #a1a1a1;
				}

				.gap {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.people {
		padding: 40rpx 0rpx;
		margin: 0 26rpx;

		.tit {
			display: flex;
			align-items: center;

			.tit_nav {
				padding: 10rpx 26rpx;
				font-size: 30rpx;
				color: #999999;
			}

			.tit_nav:first-child {
				padding-left: 0;
			}

			.tit_active {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				position: relative;

				&::after {
					content: '';
					width: 70rpx;
					height: 6rpx;
					border-radius: 20rpx;
					background-color: #333333;
					position: absolute;
					// top: 0;
					left: 15%;
					bottom: -8rpx;
					// left: 33%;
					// transform: translate(-50%, -50%);
				}
			}
		}

		.peoplebox {
			padding: 26rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E4E4E4;

			view {
				color: #7a7a7a;
			}

			.p_info {
				display: flex;
				align-items: center;

				.head {
					width: 90rpx;
					height: 90rpx;
					overflow: hidden;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.user_box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name_box {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.name {
							color: #7a7a7a;
						}
					}

					.user_lit {
						font-size: 26rpx;
					}
				}
			}

			.p_time {
				font-size: 26rpx;
			}
		}

		.match_img {
			margin-top: 20rpx;
			width: 100%;
		}

		.bottom_lit {
			margin: 20rpx auto;
			text-align: center;
			font-size: 26rpx;
			color: #727272;
		}
	}

	.btn_box {
		background-color: #fff;
		position: fixed;
		bottom: 20rpx;
		left: 40rpx;
		width: 670rpx;
		height: 92rpx;

		.go_btn {
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #fff;
			padding: 20rpx 0;
			text-align: center;
			background-color: #202020;
		}

		.end_btn {
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #fff;
			padding: 20rpx 0;
			text-align: center;
			background-color: #333333;
		}
	}
}

.member {
	min-width: 90rpx;
	height: 32rpx;
	background: linear-gradient(135deg, #7e7e7e 0%, #292929 100%);
	border-radius: 2rpx;
	border: 2rpx solid #d6c6ab;
	text-align: center;
	color: #fff !important;
	font-size: 16rpx;
	line-height: 32rpx;
	margin-left: 10rpx;
}

.number_huan {
	color: #4c310c;
	background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
	border: 2rpx solid #e6ceb5;
}

.number_hei {
	color: #4c310c;
	background: linear-gradient(180deg, #ffffff 0%, #000000 100%);
	border: 2rpx solid #e6ceb5;
}

.number_hei_vip {
	color: #4c310c;
	background: linear-gradient(180deg, #ffffff 0%, #000000 100%);
	border: 2rpx solid #e6ceb5;
}

.member_wealth {
	width: 45rpx;
	height: 32rpx;
	background: linear-gradient(135deg, #deb214 0%, #f88410 100%);
	border-radius: 2rpx;
	border: 2rpx solid #d6c6ab;
	text-align: center;
	color: #fff;
	font-size: 16rpx;
	line-height: 32rpx;
	margin-left: 5rpx;
}

.x-share {
	background-color: #ffffff;
	width: 750rpx;
	border-radius: 20rpx;
	padding: 40rpx 20rpx 80rpx;
	display: flex;
	box-sizing: border-box;

	.item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 10rpx;
		}

		span {
			color: #2e2e2e;
		}
	}
}
button{
	border: none;
	&::after{
		border: none;
	}
}
</style>
